<style lang="less">
@import "../../../styles/table-common.less";
</style>
<template>
  <!-- 咨询 -->
  <div class="search">
    <Card v-show="currView == 'index'">
      <Row v-show="openSearch" @keydown.enter.native="handleSearch">
        <Form ref="searchForm" :model="searchForm" inline :label-width="70">
          <FormItem label="工单编号" prop="consultingNo">
            <Input
              type="text"
              v-model="searchForm.consultingNo"
              placeholder="请输入工单编号"
              clearable
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="手机号" prop="phone">
            <Input
              type="text"
              v-model="searchForm.phone"
              placeholder="请输入手机号"
              clearable
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="用户名称" prop="name">
            <Input
              type="text"
              v-model="searchForm.name"
              placeholder="请输入用户名称"
              clearable
              style="width: 200px"
            />
          </FormItem>
          <span v-if="drop">
            <FormItem label="用户类型" prop="type">
              <Select
                v-model="searchForm.type"
                placeholder="请选择用户类型"
                clearable
                style="width: 200px"
              >
                <Option
                  v-for="(item, i) in userType"
                  :key="i"
                  :value="item.value"
                  >{{ item.title }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="咨询类型">
              <Select
                v-model="searchForm.problemType"
                placeholder="请选择咨询类型"
                clearable
                style="width: 200px"
              >
                <Option
                  v-for="(item, i) in consultation"
                  :key="i"
                  :value="item.description"
                  >{{ item.description }}</Option
                >
              </Select>
            </FormItem>
          </span>
          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >

            <Button @click="handleReset">重置</Button>
            <Button @click="getDataList" icon="md-refresh">刷新</Button>
            <Button type="warning" @click="ConsultingQestions">发布咨询</Button>
            <a class="drop-down" @click="dropDown">
              {{ dropDownContent }}
              <Icon :type="dropDownIcon"></Icon>
            </a>
          </FormItem>
        </Form>
      </Row>
      <Tabs v-model="consulaint" @on-click="ConsultingComplaints" type="card">
        <TabPane label="待处理" name="Pendin">
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              :data="data"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="showSelect"
              ref="table"
              class="table"
            >
              <template slot-scope="{ row, index }" slot="obsolete">
                <span style="color: red" v-if="row.obsolete == '已超时'">
                  {{ row.obsolete }}</span
                >
                <span style="color: #ff8c00" v-else>
                  {{ dataObsolete[index] }}</span
                >
              </template>
            </Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
              transfer
              :current="searchForm.pageNumber"
              :total="total"
              :page-size="searchForm.pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
        <TabPane label="处理中" name="Processi">
          <Row>
            <Table
              :loading="loading"
              border
              :columns="newcolumns"
              :data="data"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="showSelect"
              ref="table"
              class="table"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
              transfer
              :current="searchForm.pageNumber"
              :total="total"
              :page-size="searchForm.pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page> </Row
        ></TabPane>
        <TabPane label="已完结" name="Closed">
          <Row>
            <Table
              :loading="loading"
              border
              :columns="newcolumns"
              :data="data"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="showSelect"
              ref="table"
              class="table"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
              transfer
              :current="searchForm.pageNumber"
              :total="total"
              :page-size="searchForm.pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page> </Row
        ></TabPane>
      </Tabs>
    </Card>

    <Modal v-model="showDetail" title="发布咨询" width="50%">
      <div>
        <!-- 表单 -->
        <Form
          ref="AbnormalFron"
          :model="AbnormalFron"
          :rules="AbnormalFronrule"
          :label-width="80"
        >
          <Row>
            <Col span="12">
              <FormItem label="用户名称" prop="name">
                <Input
                  v-model="AbnormalFron.name"
                  placeholder="用户名称"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="手机号" prop="phone">
                <Input
                  v-model="AbnormalFron.phone"
                  placeholder="手机号"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="问题分类" prop="problemType">
                <RadioGroup
                  v-model="AbnormalFron.problemType"
                  @on-change="serviceProblem"
                >
                  <Radio
                    v-for="(item, index) in consultation"
                    :value="item.value"
                    :label="item.description"
                    :key="index"
                  ></Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <!-- <Col span="12">
              <FormItem label="类型描述" prop="problemValue">
                <Input
                  v-model="AbnormalFron.problemValue"
                  placeholder="类型描述"
                ></Input>
              </FormItem>
            </Col> -->
          </Row>
        </Form>
      </div>
      <div>
        <!-- 边框线 -->
        <div style="border: 1.3px solid gainsboro; height: 300px">
          <!-- 输入框 -->
          <Input style="height:200px" class="replyinptu" border:="false"
          v-model="huifuContent" placeholder="请输入回复内容" type="textarea"
          :rows="7" :autosize="{ minRows: 7, maxRows: 8 }" />
          <!-- 上传图片 -->
          <div class="uploadrImag">
            <div
              class="demo-upload-list"
              v-for="item in uploadList"
              :key="item"
            >
              <!-- v-if="item.status === 'finished'" -->
              <template>
                <div>
                  <img :src="item.url" alt="" />
                </div>
                <div class="demo-upload-list-cover">
                  <Icon
                    type="ios-eye-outline"
                    @click.native="handleView(item.url)"
                  ></Icon>
                  <Icon
                    type="ios-trash-outline"
                    @click.native="handleRemove(item)"
                  ></Icon>
                </div>
              </template>
              <!-- <template v-else>
                      <Progress
                        v-if="item.showProgress"
                        :percent="item.percentage"
                        hide-info
                      ></Progress>
                    </template> -->
            </div>
            <!-- userId: userId, orderId: orderId, -->
            <Upload
              :disabled="false"
              ref="upload"
              :show-upload-list="false"
              :default-file-list="defaultList"
              :on-success="handleSuccess"
              :format="['jpg', 'jpeg', 'png']"
              :max-size="20480"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              :headers="header"
              type="drag"
              :action="uploadConsultingId"
              style="display: inline-block; width: 58px"
            >
              <div style="width: 58px; height: 58px; line-height: 58px">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
            <Modal title="" v-model="visible">
              <img :src="imgName" v-if="visible" style="width: 100%" />
            </Modal>
            <div slot="footer"></div>
          </div>
          <!-- 边框线 -->
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" :loading="loadingHuifu" @click="huifuAdd"
          >发布</Button
        >
      </div>
    </Modal>
    <!-- 货主 -->
    <OwnerDetails
      @OwnerDetaiEnd="OwnerDetaiEnd"
      :OwnerDetailsId="OwnerDetailsId"
      :OwnerDetailsModalue="this.OwnerDetailsModalue"
    >
    </OwnerDetails>
    <!-- 驾驶员详情   -->
    <DriverDetails
      @DriverDetaEnd="DriverDetaEnd"
      :BidderdUserId="BidderdUserId"
      :driverModalue="this.driverModalue"
    >
    </DriverDetails>
    <!-- 车主 -->
    <NewOwnerDetails
      @newOwnerDetailsEnd="newOwnerDetailsEnd"
      :newOwnerDetailsId="newOwnerDetailsId"
      :newOwnerDetails="this.newOwnerDetails"
    >
    </NewOwnerDetails>
  </div>
</template>

<script>
import {
  deleteMessage,
  getMsgServiceConsultingList,
  getMsgConsultingList,
  getmsgConsultingIdList,
  saveMsgConsulting,
} from "@/api/index";
import DriverDetails from "@/views/componentsonn_source_goods/DriverDetails";
import OwnerDetails from "@/views/componentsonn_source_goods/OwnerDetails";
import { shortcuts } from "@/libs/shortcuts";
import { getStore, setStore } from "@/libs/storage";
import { uploadConsultingPicId } from "@/api/index";
import NewOwnerDetails from "@/views/componentsonn_source_goods/newOwnerDetails";
export default {
  title: "message-kefu",
  data() {
    return {
      newOwnerDetails: false, //车主弹框
      newOwnerDetailsId: "", //车主Id

      dataObsolete: {},
      BidderdUserId: "", //报价人Id
      driverModalue: false, //驾驶员详情弹框
      OwnerDetailsModalue: false,
      OwnerDetailsId: "", //货主Id
      userType: [
        {
          value: 1,
          title: "驾驶员",
        },
        {
          value: 2,
          title: "货主",
        },
        {
          value: 3,
          title: "游客",
        },
        {
          value: 4,
          title: "车主",
        },
        {
          value: 5,
          title: "个体户",
        },
      ],
      AbnormalFron: {
        name: "",
        phone: "",
        problemType: "",
        problemValue: "",
      },
      AbnormalFronrule: {
        problemType: [
          {
            required: true,
            message: "请选择问题分类",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur",
          },
        ],
        problemValue: [
          {
            required: true,
            message: "请输入类型描述",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
      },
      header: {
        "content-type": "multipart/form-data",
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      fileall: "",
      uploadList: [],
      visible: false,
      consulaint: "Pendin",
      huifuId: "",
      huifuContent: "",
      currView: "index",
      showDetail: false,
      uploadConsultingPicId: uploadConsultingPicId,
      openSearch: true,
      openTip: true,
      loading: true, // 表单加载状态
      userLoading: true,
      selectList: [], // 多选数据
      drop: false,
      dropDownContent: "展开",
      dropDownIcon: "ios-arrow-down",
      userId: JSON.parse(Cookies.get("userInfo")).id,
      searchForm: {
        // 搜索框对应data对象
        name: "",
        phone: "",
        consultingNo: "",
        problemType: "",
        handleState: 1,
        userId: "",
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      transferData: {},
      selectDate: null, // 选择日期绑定modal
      options: {
        shortcuts: shortcuts,
      },
      columnslst: [],
      columns: [
        // 表头
        {
          type: "index",
          minWidth: 60,
          align: "center",
          title: "#",
        },
        {
          title: "工单编号",
          minWidth: 250,
          key: "consultingNo",
          align: "center",
        },
        {
          title: "手机号",
          key: "phone",
          minWidth: 140,
          render: (h, params) => {
            return h("div", params.row.phone);
          },
        },
           {
          title: "用户",
          minWidth: 120,
          key: "name",
          align: "center",
        },
        // {
        //   title: "用户",
        //   key: "name",
        //   minWidth: 120,
        //   render: (h, params) => {
        //     if (params.row.type == 5) {
        //       return h("div", [
        //         h(
        //           "a",
        //           {
        //             on: {
        //               click: () => {
        //                 // re = "个体户";
        //                 this.individualBusinessOpen(params.row);
        //               },
        //             },
        //           },
        //           params.row.name
        //         ),
        //       ]);
        //     } else if (params.row.type == 4) {
        //       return h("div", [
        //         h(
        //           "a",
        //           {
        //             on: {
        //               click: () => {
        //                 this.newOwnerDetailsOpen(params.row);
        //               },
        //             },
        //           },
        //           params.row.name
        //         ),
        //       ]);
        //     } else if (params.row.type == 3) {
        //       return h("div", params.row.name);
        //     } else if (params.row.type == 2) {
        //       return h("div", [
        //         h(
        //           "a",
        //           {
        //             on: {
        //               click: () => {
        //                 this.showCargoOwnerInfoVo(params.row);
        //               },
        //             },
        //           },
        //           params.row.name
        //         ),
        //       ]);
        //     } else if (params.row.type == 1) {
        //       return h("div", [
        //         h(
        //           "a",
        //           {
        //             on: {
        //               click: () => {
        //                 this.BidderdDiver(params.row);
        //               },
        //             },
        //           },
        //           params.row.name
        //         ),
        //       ]);
        //     }
        //   },
        // },
        {
          title: "用户类型",
          key: "type",
          width: 100,
          // align: "center",
          render: (h, params) => {
            let re = "",
              color = "";
            if (params.row.type == 1) {
              re = "驾驶员";
              color = "red";
            } else if (params.row.type == 2) {
              re = "货主";
              color = "blue";
            } else if (params.row.type == 3) {
              re = "游客";
              color = "default";
            } else if (params.row.type == 4) {
              re = "车主";
              color = "default";
            } else if (params.row.type == 5) {
              re = "个体户";
              color = "default";
            }
            return h("div", [
              h(
                "span",

                re
              ),
            ]);
          },
        },
        {
          title: "咨询类型",
          key: "problemType",
          minWidth: 140,
        },
        {
          title: "服务评分",
          key: "level",
          minWidth: 120,
          render: (h, params) => {
            if (params.row.level >= 1) {
              return h("div", [
                h("Rate", {
                  props: {
                    count: params.row.level,
                    disabled: true,
                    value: params.row.level, //
                  },
                  style: {
                    margin: "0px",
                    padding: "0px",
                  },
                }),
              ]);
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "#B0C4DE",
                  },
                },
                "暂无评分"
              );
            }
          },
        },
        {
          title: "处理时效",
          minWidth: 150,
          slot: "obsolete",
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth: 260,
        },
        {
          title: "更新时间",
          key: "updateTime",
          minWidth: 260,
        },

        // 咨询类型
        // 订单
        {
          title: "操作",
          key: "action",
          minWidth: 90,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.detail(params.row);
                    },
                  },
                },
                "处理"
              ),
            ]);
          },
        },
      ],
      newcolumnsList: [],
      newcolumns: [
        // 表头

        {
          type: "index",
          minWidth: 60,
          align: "center",
          title: "#",
        },
        {
          title: "工单编号",
          minWidth: 250,
          key: "consultingNo",
          align: "center",
        },
        {
          title: "手机号",
          key: "phone",
          minWidth: 140,
          render: (h, params) => {
            return h("div", params.row.phone);
          },
        },
           {
          title: "用户",
          minWidth: 120,
          key: "name",
          align: "center",
        },
        // {
        //   title: "用户",
        //   key: "name",
        //   minWidth: 120,
        //   render: (h, params) => {
        //     if (params.row.type == 5) {
        //       return h("div", [
        //         h(
        //           "a",
        //           {
        //             on: {
        //               click: () => {
        //                 // re = "个体户";
        //                 this.individualBusinessOpen(params.row);
        //               },
        //             },
        //           },
        //           params.row.name
        //         ),
        //       ]);
        //     } else if (params.row.type == 4) {
        //       return h("div", [
        //         h(
        //           "a",
        //           {
        //             on: {
        //               click: () => {
        //                 this.newOwnerDetailsOpen(params.row);
        //               },
        //             },
        //           },
        //           params.row.name
        //         ),
        //       ]);
        //     } else if (params.row.type == 3) {
        //       return h("div", params.row.name);
        //     } else if (params.row.type == 2) {
        //       return h("div", [
        //         h(
        //           "a",
        //           {
        //             on: {
        //               click: () => {
        //                 this.showCargoOwnerInfoVo(params.row);
        //               },
        //             },
        //           },
        //           params.row.name
        //         ),
        //       ]);
        //     } else if (params.row.type == 1) {
        //       return h("div", [
        //         h(
        //           "a",
        //           {
        //             on: {
        //               click: () => {
        //                 this.BidderdDiver(params.row);
        //               },
        //             },
        //           },
        //           params.row.name
        //         ),
        //       ]);
        //     }
        //   },
        // },
        {
          title: "用户类型",
          key: "type",
          width: 100,
          // align: "center",
          render: (h, params) => {
            let re = "",
              color = "";
            if (params.row.type == 1) {
              re = "驾驶员";
              color = "red";
            } else if (params.row.type == 2) {
              re = "货主";
              color = "blue";
            } else if (params.row.type == 3) {
              re = "游客";
              color = "default";
            } else if (params.row.type == 4) {
              re = "车主";
              color = "default";
            } else if (params.row.type == 5) {
              re = "个体户";
              color = "default";
            }
            return h("div", [
              h(
                "span",

                re
              ),
            ]);
          },
        },
        {
          title: "咨询类型",
          key: "problemType",
          minWidth: 140,
        },
        {
          title: "服务评分",
          key: "level",
          minWidth: 120,
          render: (h, params) => {
            if (params.row.level >= 1) {
              return h("div", [
                h("Rate", {
                  props: {
                    count: params.row.level,
                    disabled: true,
                    value: params.row.level, //
                  },
                  style: {
                    margin: "0px",
                    padding: "0px",
                  },
                }),
              ]);
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "#B0C4DE",
                  },
                },
                "暂无评分"
              );
            }
          },
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth: 260,
        },
        {
          title: "更新时间",
          key: "updateTime",
          minWidth: 260,
        },

        // 咨询类型
        // 订单
        {
          title: "操作",
          key: "action",
          minWidth: 90,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let text = "";
            if (this.consulaint == "Closed") {
              text = "查看";
            } else {
              text = "处理";
            }
            return h("div", [
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.detail(params.row);
                    },
                  },
                },
                text
              ),
            ]);
          },
        },
      ],
      seconds: "",
      activities: [],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      dictMessageType: this.$store.state.dict.messageType,
      consultation: [],
      tiemlist: [],
      loadingHuifu: false,
    };
  },
  components: {
    OwnerDetails,
    DriverDetails,
    NewOwnerDetails,
  },
  methods: {
    // 天 时 分 秒 格式化函数
    countDown() {
      let newTiem = new Date().getTime();
      let a = 24 * 60 * 60 * 1000;
      var ao = {};
      for (let index = 0; index < this.data.length; index++) {
        let item = this.data[index];
        item.setiem = this.tiemlist[index].tiem + a;
        if (newTiem > item.setiem) {
          item.obsolete = "已超时";
        } else {
          item.setiem = item.setiem - newTiem;
          let d = parseInt(item.setiem / (24 * 60 * 60 * 1000));
          d = d < 10 ? "0" + d : d;
          let h = parseInt((item.setiem / (60 * 60 * 1000)) % 24);
          h = h < 10 ? "0" + h : h;
          let m = parseInt((item.setiem / (60 * 1000)) % 60);
          m = m < 10 ? "0" + m : m;
          let s = parseInt((item.setiem / 1000) % 60);
          s = s < 10 ? "0" + s : s;
          item.obsolete = h + "时" + m + "分" + s + "秒";
          // this.seconds = item.obsolete;
        }
        ao[index] = item.obsolete;
      }
      this.dataObsolete = ao;
    },
    //定时器没过1秒参数减1
    // Time() {
    //   setInterval(() => {
    //     this.countDown();
    //   }, 1000);
    // },
    // 单选框
    complaintProblem(val) {
      this.AbnormalFron.problemType = val;
    },
    // 点击查看回复图片
    handleView(url) {
      let image = new Image();
      image.src = url;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
      // this.imgName = url;
      // this.visible = true;
    },
    // 删除图片
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    uploadchange(res, file, fileList) {},
    // 成功
    handleSuccess(res, file, fileList) {
      if (res.result != null) {
        var a = res.result;
        this.enlargeImig =
          this.$baseUrl +
          "/freight/file/view/" +
          a +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
      // this.uploadList.forEach((item) => {
      //   var a = item.response.result;
      //   item.url =
      //     this.$baseUrl +
      //     "/freight/file/view/" +
      //     a +
      //     "?accessToken=" +
      //     this.accessToken +
      //     "&preview=true";
      // });
    },
    // 文件格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
    // 文件超出指定大小限制时的钩子
    handleMaxSize(file) {
      this.$Message.error("图片超出了最大存储限制");
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // console.log("压缩前", file); // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 上传文件之前的钩子，参数为上传的文件
    handleBeforeUpload(file) {
      const check = this.uploadList.length < 3;
      if (!check) {
        this.$Message.error("一次最多上传三张图片");
        return false;
      }
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const _base64 = reader.result;
        file.url = _base64;
        this.uploadList.push(file);
      };
      this.uploadList = this.$refs.upload.fileList;
      this.fileall = file;
      return false;
    },
    // 驾驶员
    BidderdDiver(row) {
      this.BidderdUserId = row.userId;
      this.driverModalue = true;
    },
    // 驾驶员详情关闭
    DriverDetaEnd(val) {
      this.driverModalue = val;
      this.BidderdUserId = "";
    },
    // 货主详细信息开启
    showCargoOwnerInfoVo(row) {
      this.OwnerDetailsId = row.userId;
      this.OwnerDetailsModalue = true;
    },
    // 货主详细信息关闭
    OwnerDetaiEnd(val) {
      this.OwnerDetailsModalue = val;
      this.OwnerDetailsId = "";
    },

    //车主详情
    newOwnerDetailsOpen(row) {
      this.newOwnerDetails = true;
      this.newOwnerDetailsId = row.userId;
    },
    //车主信息关闭
    newOwnerDetailsEnd(val) {
      this.newOwnerDetails = val;
      this.newOwnerDetailsId = "";
    },
    // 跳转详情
    detail(row) {
      var data = {
        msgConsultingId: row.id,
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      };
      this.loading = true;
      // this.bus.$emit("loading", true);
      getmsgConsultingIdList(data).then((res) => {
        this.activities = res.result;
        let key = JSON.stringify(this.searchForm);
        // this.bus.$emit("loading", false);
        this.loading = false;
        this.$router.push({
          name: "ConsultDetails",
          query: {
            data: JSON.stringify(row),
            activities: JSON.stringify(this.activities),
            seetest: 2,
            consulaint: JSON.stringify(this.consulaint),
            page: this.searchForm.pageNumber,
            key: key,
          },
        });
      });
    },
    // 咨询投诉
    ConsultingComplaints(val) {
      if (this.consulaint == "Closed") {
        this.searchForm.handleState = 3;
        this.handleReset();
      } else if (this.consulaint == "Processi") {
        this.searchForm.handleState = 2;
        this.handleReset();
      } else {
        this.searchForm.handleState = 1;
        this.handleReset();
      }
    },
    ConsultingQestions() {
      this.showDetail = true;
      this.AbnormalFron.problemType = "";
      this.uploadList = [];
      this.huifuContent = "";
      this.AbnormalFron.name = "";
      this.AbnormalFron.phone = "";
    },
    huifuAdd() {
      if (this.huifuContent == "") {
        this.$Message.error("请填写内容");
        return false;
      }
      this.consultation.forEach((item) => {
        if (this.AbnormalFron.problemType == item.description) {
          this.AbnormalFron.problemValue = item.value;
        }
      });
      this.loadingHuifu = true;
      // 咨询
      let param = new FormData(); // 创建form对象
      param.append("name", this.AbnormalFron.name);
      param.append("phone", this.AbnormalFron.phone);
      param.append("problemType", this.AbnormalFron.problemType);
      param.append("problemValue", this.AbnormalFron.problemValue);
      param.append("orderId", 183); // 通过append向form对象添加数据
      param.append("describes", this.huifuContent); // 添加form表单中其他数据
      this.uploadList.forEach((item) => {
        param.append("file", item);
      });
      saveMsgConsulting(param).then((res) => {
        this.loadingHuifu = false;
        if (res.code == 200) {
          (this.AbnormalFron = {
            name: "",
            phone: "",
            problemType: "",
            problemValue: "",
          }),
            (this.huifuContent = "");
          this.showDetail = false;
          this.$refs.upload.clearFiles();
          this.uploadList = [];
          this.getDataList();
          this.$Message.success("发送成功");
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    init() {
      this.getDataList();
      this.getMsgConsulting();
    },
    getMsgConsulting() {
      getMsgConsultingList;
    },
    submited() {
      this.currView = "index";
      this.getDataList();
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "ios-arrow-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "ios-arrow-up";
      }
      this.drop = !this.drop;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    getDataList() {
      this.loading = true;
      this.searchForm.userId = this.userId;

      getMsgServiceConsultingList(this.searchForm).then((res) => {
        this.tiemlist = [];
        this.loading = false;
        if (res.success) {
          this.data = res.result.content;
          this.total = res.result.totalElements;
          this.columns = this.columnslst;
          this.newcolumns = this.newcolumnsList;
          if (this.consulaint != "Closed") {
            this.columns = this.columns.filter((col) => col.key !== "level");
            this.newcolumns = this.newcolumns.filter(
              (col) => col.key !== "level"
            );
          } else {
            this.columns = this.columns.filter((col) => col.key !== "obsolete");
            this.newcolumns = this.newcolumns.filter(
              (col) => col.key !== "obsolete"
            );
          }
          if (this.consulaint == "Processi") {
            this.columns = this.columns.filter((col) => col.key !== "obsolete");
            this.columns = this.columns.filter((col) => col.key !== "level");
            this.newcolumns = this.newcolumns.filter(
              (col) => col.key !== "obsolete"
            );
            this.newcolumns = this.newcolumns.filter(
              (col) => col.key !== "level"
            );
          }
          this.data.forEach((item) => {
            this.tiemlist.push({
              tiem: new Date(item.updateTime).getTime(), //获取目标时间戳
            });
          });
          //  console.log(111);
          this.countDown();
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
          // this.bus.$emit("loading", false);
        }
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.selectDate = null;
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.searchForm.problemType = "";
      // 重新加载数据
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    add() {
      this.transferData.type = 0;
      this.currView = "addEdit";
    },
    edit(v) {
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      data.type = 1;
      this.transferData = data;
      this.currView = "addEdit";
    },
    sendDetail(v) {
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      this.transferData = v;
      this.showDetail = true;
    },
    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
        // 记得确认修改此处
        content: "您确认删除?",
        loading: true,
        onOk: () => {
          // 删除
          deleteMessage({ ids: v.id }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.clearSelectAll();
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    showSelect(e) {
      this.selectList = e;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    delAll() {
      if (this.selectList.length <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectList.length + " 条数据?",
        loading: true,
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function (e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          // 批量删除
          deleteMessage({ ids: ids }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.clearSelectAll();
              this.getDataList();
            }
          });
        },
      });
    },
  },
  mounted() {
    if (this.$route.query.page) {
      this.searchForm.pageNumber = this.$route.query.page;
    }
    if (this.$route.query.key) {
      let obj = JSON.parse(this.$route.query.key);
      this.searchForm = obj;
    } else {
      this.searchForm.orderStates = "5,6,7";
    }
    this.consultation = JSON.parse(
      window.localStorage.getItem("consultation_type")
    );
    if (typeof this.$route.query.consulaint != "undefined") {
      this.consulaint = JSON.parse(this.$route.query.consulaint);
    } else {
      this.consulaint = "Pendin";
    }
    this.columnslst = this.columns;
    this.newcolumnsList = this.newcolumns;

    this.init();
    this.timer = setInterval(() => {
      this.countDown();
    }, 1000);
    // this.Time(); //调用定时器
  },
  beforeDestroy() {
    clearInterval(this.timer); //关闭
  },
};
</script>
<style  lang="less">
.ivu-rate-star {
  width: 8px;
  height: 8px;
  /* margin-right: 3px; */
}

.platformleft {
  display: flex;
}
.driver_car {
  width: 150px;
  height: 100px;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.border_card {
  margin: 5px 0;
  border: 1px dashed #a9a9a9;
}
.replyinptu {
  textarea.ivu-input {
    border: 1px solid transparent;
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px transparent;
    // border-bottom: 1.3px solid gainsboro;
  }
}
.table table {
  // table-layout: auto;
  width: 100% !important;
}
</style>
<style scoped lang="less" >
.uploadrImag {
  margin-top: 10px;
  margin-left: 15px;
  width: 300px;
  position: absolute;
  bottom: 75px;
  left: 9px;
}
</style>